<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文件上传</title>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

    <!-- 引入组件库 -->
    <script src="./js/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 500px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <h2>修改头像</h2>
        </el-header>
        <el-main>
            <!--
            action="/upload" :服务端文件上传地址
            :on-success="handleSuccess" 文件上传成功执行函数
             :on-error="handleError" 文件上传失败执行函数
              drag 支持拖拽文件上传
              multiple 支持多文件上传
              :show-file-list="false" 是否显示文件上传列表
            -->
            <el-upload
                    class="avatar-uploader"
                    action="/user/upload"
                    :on-success="handleSuccess"
                    :on-error="handleError"
                    drag
                    multiple
                    :show-file-list="false"
            >
                <img v-if="imageUrl" :src="imageUrl" class="avatar" >
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>

        </el-main>
    </el-container>

    <video width="320" height="240" controls>
        <source :src="videoSrc" type="video/mp4">
    </video>
</div>


<script>
    new Vue({
        el: '#app',
        methods: {
            data:{
                imageUrl:"",//图片地址
                videoSrc:""
            },
            handleSuccess(response, file, fileList) {
                console.log(response);
                if(response.data.type=="video"){
                    this.videoSrc = response.data.src;
                }
                if(response.data.type=="image"){
                    this.imageUrl = response.data.src;
                    parent.index.circleUrl = response.data.src;
                    sessionStorage.setItem("circleUrl",this.imageUrl);
                }
                //更改图片地址
                // this.imageUrl = URL.createObjectURL(file.raw);
                this.$message.success('上传成功');
            },
            handleError(err, file, fileList) {
                this.$message.error('上传失败');
            }
        }
    });
</script>
</body>
</html>
